import React, { Component } from 'react';
import { connect } from 'react-redux';
import {
    Alert,
    Modal,
    Button
} from 'react-bootstrap';

import AddDbConnectorInner from '../../components/deploy/addDbConnector';
import { function_add_dbconnector } from '../../actions/deploy';

import './less/host.css';

class AddDbConnector extends Component {

    state = {
      passwordFlg: true
    }

    handleSubmit () {
        function_add_dbconnector(
          this.props.deployUrl,
          this.props.projectId,
          () => {
            this.props.handleSubmit();
          }
        );
        this.props.handleClose();
    }

    render () {
        return (
          <Modal className="addHostBox" show={this.props.show} onHide={this.props.handleClose.bind(this)} animation={true}>
            <Modal.Header closeButton>
              <Modal.Title>添加数据库链接</Modal.Title>
            </Modal.Header>
            <Modal.Body>
              <Alert variant="warning">
                重要：务必确保从{this.props.deployHost}服务器上能够直接连接到或者使用ssh通道链接到该数据库
              </Alert>
              <AddDbConnectorInner projectId={this.props.projectId} />
            </Modal.Body>
            <Modal.Footer>
              <Button variant="secondary" onClick={this.props.handleClose.bind(this)}>
                取消
              </Button>
              <Button variant="primary" onClick={this.handleSubmit.bind(this)}>
                添加
              </Button>
            </Modal.Footer>
          </Modal >
        )
    }
}

function mapStateToProps (state) {
    return {
      deployUrl: state.deploy.deployUrl,
      deployHost: state.deploy.deployHost,
    }
  }
  
  export default connect(mapStateToProps)(AddDbConnector);